<template>
	<view class='mine'>
		<view class="mine-zl">
			<!-- 	<view class='zl-home'>
				<image src="/static/icon/home.png"></image>
			</view>
			<view class="zl-edit">
				<image src="/static/icon/member/m14.png"></image>
			</view> -->

			<view class="zl-member">

				<view class="member-name m-top">张三</view>
				<view class="member-butty m-top">业务经理</view>
				<view class="member-company m-top">安徽犇犇牛网络科技有限公司</view>


				<view class='member-title'>地址：安徽省合肥市瑶海区北二环1009号</view>
				<view class='member-title'>电话：13053055110</view>
				<view class='member-title'>微信：754226539</view>
				<view class='member-title'>主营：安徽省合肥市瑶海区北二环1009号安徽省合肥市瑶海区北二环1009号安徽省合肥市瑶海区北二环1009号安徽省合肥市瑶海区北二环1009号</view>
			</view>


		</view>
		<view class="mine-tj">
			<view class='tj'>
				<view class="tj-item" v-for="(item,index) in tjList">
					<view>0</view>
					<view>{{item}}</view>
				</view>
			</view>
			<view class='tj-sq'>
				<image src="/static/icon/an1.png" mode=""></image>
				<view class='sq-title'>申请明星企业</view>
			</view>
		</view>

		<view class="mine-nav">
			<navigator url="/pages/mine/privilege/privilege" class="nav-item">
				<image src="/static/icon/member/m3.png" mode=""></image>
				<view class="item-tilte">
					<view class="title-top">
						<view class="top-my">我的特权</view>
						<view>&yen366.00/年即可成为vip</view>
					</view>
					<view class="title-down">每天1.0027397260273974元让你获得全国最新资讯，每天认识新客户。</view>
				</view>
				<uni-icons type="forward" size="30"></uni-icons>
			</navigator>
			<navigator url="/pages/ad/ad" class="nav-item">
				<image src="/static/icon/member/m4.png" mode=""></image>
				<view class="item-tilte">
					<view class="title-top">
						<view class="top-my">发布广告</view>
					</view>
					<view class="title-down">你可以给自己的企业投放广告，增加曝光度！</view>
				</view>
				<uni-icons type="forward" size="30"></uni-icons>
			</navigator>

			<navigator url="/pages/mine/wallet/wallet" class="nav-item">
				<image src="/static/icon/member/m5.png" mode=""></image>
				<view class="item-tilte">
					<view class="title-top">
						<view class="top-my">钱包</view>
					</view>
					<view class="title-down">金币：12个</view>
				</view>
				<uni-icons type="forward" size="30"></uni-icons>
			</navigator>

			<navigator url="/pages/task/task" class="nav-item">
				<image src="/static/icon/member/m8.png" mode=""></image>
				<view class="item-tilte item-special">
					每日任务
				</view>
				<uni-icons type="forward" size="30"></uni-icons>
			</navigator>

			<navigator url="/pages/concern/concern" class="nav-item">
				<image src="/static/icon/member/m9.png" mode=""></image>
				<view class="item-tilte">
					<view class="title-top">
						<view class="top-my">1人关注了你</view>
					</view>
					<view class="title-down">看看谁关注了我</view>
				</view>
				<uni-icons type="forward" size="30"></uni-icons>
			</navigator>

			<navigator url="/pages/auth/auth" class="nav-item">
				<image src="/static/icon/member/m10.png" mode=""></image>
				<view class="item-tilte">
					<view class="title-top">
						<view class="top-my">认证中心</view>
					</view>
					<view class="title-down">真实头像认证、真人实名认证</view>
				</view>
				<uni-icons type="forward" size="30"></uni-icons>
			</navigator>
			<navigator url="/pages/set/set" class="nav-item">
				<image src="/static/icon/member/m11.png" mode=""></image>
				<view class="item-tilte">
					<view class="title-top">
						<view class="top-my">设置</view>
					</view>
					<view class="title-down">账号、个人信息与通知</view>
				</view>
				<uni-icons type="forward" size="30"></uni-icons>
			</navigator>

			<view class="nav-item">
				<image src="/static/icon/member/m12.png" mode=""></image>
				<view class="item-tilte item-special">
					客服电话
				</view>
				<uni-icons type="forward" size="30"></uni-icons>
			</view>
		</view>
		<view class="zzc">
		
				
				<view class='zzc-mobile' style="
					height: 80upx;
					border: 1px solid red;
					background-color: #FFFFFF;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 42upx;
					border-radius: 20upx;
					position: fixed;
					bottom: 12upx;
					<!-- top:12upx; -->
					left: 12upx;
					right: 12upx;
					width: 95%;
					z-index: 99999;
					 ">13053055110</view>
					
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				tjList: [
					'我的求购', '我的供应', '我的染整', '关注的名片', '收藏的信息', '收藏的企业'
				],
			}
		},
		methods: {


			//拨打电话
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: '114' //仅为示例
				});
			}

		}
	}
</script>

<style>
	.mine-zl {
		width: 100%;
		height: 460upx;
		background-color: #ce5314;
	}

	.mine-zl .zl-member {
		width: 90%;
		background-color: #FFFFFF;
		height: 420upx;
		margin: 0 auto;
		border-radius: 20upx;
		padding: 10upx;
	}

	.zl-member .member-title {
		font-size: 30upx;
		color: #545454;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		margin: 8upx 0;
	}

	.m-top {
		margin-top: 20upx;
	}

	.member-name {
		font-size: 52upx;
		color: #545454;
	}

	.member-butty {
		font-size: 24upx;
		color: #545454;
	}

	.member-company {
		margin-bottom: 20upx;
	}

	.mine-zl .zl-home {
		width: 100%;
		height: 120upx;
		padding: 20upx;
		display: flex;
		align-items: center;
	}

	.mine-zl .zl-edit {
		width: 100%;
		height: 340upx;
		display: flex;
		justify-content: center;
	}

	.zl-home image {
		width: 80upx;
		height: 80upx;
	}

	.zl-edit image {
		width: 200upx;
		height: 80upx;
	}

	.mine-tj {
		width: 100%;
		height: 320upx;
		margin-top: 20upx;
		padding: 20upx 0;
	}

	.mine-tj .tj {
		width: 100%;
		height: 220upx;
		display: flex;
		flex-wrap: wrap;
	}

	.mine-tj .tj-sq {
		width: 80%;
		height: 80upx;
		border: 1px solid #ce5314;
		margin: 0 auto;
		margin-top: 20upx;
		border-radius: 100upx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ce5314;
	}

	.tj-sq image {
		width: 50upx;
		height: 50upx;
	}

	.tj-sq .sq-title {
		margin-left: 20upx;
	}

	.tj .tj-item {
		width: 32.8%;
		height: 100upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-right: 4upx solid #BCBEC2;
	}

	.tj-item:nth-child(3n) {
		border-right: 0;
	}

	.mine-nav {
		border-top: 30upx solid #f5f5f5;
	}

	.nav-item {
		display: flex;
		align-items: center;
		justify-content: space-around;
		font-size: 26upx;
		color: #545454;
		margin-top: 10upx;
		border-bottom: 1px solid #F5F5F5;
		padding: 10upx;
	}

	.nav-item image {
		width: 72upx;
		height: 66upx;
	}

	.nav-item .item-tilte {
		width: 80%;
		height: 120upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0 10upx;
	}

	.nav-item .item-special {

		font-size: 30upx;
		font-weight: bold;
	}

	.item-tilte .title-top {
		display: flex;
		justify-content: space-between;
	}

	.item-tilte .title-down {
		margin-top: 10upx;
	}

	.top-my {
		font-size: 30upx;
		font-weight: bold;
	}

	.zzc {
		background: rgba(0, 0, 0, .5);
		position: fixed;
		z-index: 999;
		right: 0;
		bottom: 0;
		top: 0;
		left: 0;
	}
</style>
